
<template>
  <div>
    <template v-for="item in currentLinkData" :key="`${item.code}`">
      <div class="link-group-title">{{ item.name }}</div>
      <RadioGroup v-bind="attrs" v-model:value="selectId" @change="handleChange" >
        <template v-for="itemChild in item.children" :key="`${itemChild.code}`">
        <Radio :value="itemChild.id" :disabled="itemChild.disabled">
          {{ itemChild.name }}
        </Radio>
      </template>
      </RadioGroup>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, onMounted, nextTick } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign'
import {  } from './data'
import { filter as filterTree, eachTree } from '/@/utils/helper/treeHelper'
import { propTypes } from '/@/utils/propTypes';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { Radio } from 'ant-design-vue';

const RadioGroup = Radio.Group

const selectId = ref<any>()
const currentLinkData = ref<any[]>([])
const selectLinkParam = ref<any>()
const attrs = useAttrs({ excludeDefaultKeys: false });

const emit = defineEmits(['register', 'success', 'update:value', 'extParams']);

const props = defineProps({
  value: propTypes.string,
  linkData: propTypes.any,
  allData: propTypes.any
});


const handleTreeSelect = (id) => {
  const allData = props.allData
  const linkData = props.linkData
  currentLinkData.value = linkData.get(allData.get(id).code) || []
  console.log('currentLinkData', currentLinkData.value)
}
const handleChange = (e) => {
  console.log('e', e)
  emit('update:value', unref(selectId))
}

defineExpose({
  handleTreeSelect
})

</script>

<style lang="less">

.link-group-title {
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: 5px;
}
</style>